<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anime.js 爆炸点赞特效</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        .like-button {
            position: relative;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            outline: none;
        }
        .circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0; /* 初始透明 */
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
<body>

<button class="like-button">点赞</button>

<script>
    const likeButton = document.querySelector('.like-button');

    likeButton.addEventListener('click', () => {
        createBurst();
    });

    function createBurst() {
        const count = 12; // 圆形数量
        const colors = ["white", "red", "green", "blue"]; // 颜色数组
        const radius = { min: 50, max: 150 }; // 半径范围

        for (let i = 0; i < count; i++) {
            const circle = document.createElement('div');
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            const angle = (i / count) * (Math.PI * 2); // 计算角度

            // 设置圆形样式
            circle.classList.add('circle');
            circle.style.width = '20px';
            circle.style.height = '20px';
            circle.style.backgroundColor = randomColor;
            circle.style.left = '50%';
            circle.style.top = '50%';
            circle.style.transform = `translate(-50%, -50%)`; // 定位到中心
            document.body.appendChild(circle);

            // 动画效果
            const distance = Math.random() * (radius.max - radius.min) + radius.min; // 随机距离
            const duration = 1000; // 动画持续时间

            anime({
                targets: circle,
                translateX: Math.cos(angle) * distance,
                translateY: Math.sin(angle) * distance,
                opacity: [1, 0], // 从可见到不可见
                duration: duration,
                easing: 'easeOutQuad',
                complete: () => {
                    circle.remove(); // 动画完成后移除元素
                }
            });
        }
    }
</script>

</body>
</html>
